/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Cell, Table, TableBody, TableRow, Text, useTheme,
} from "customize-easy-ui-component";
import {DirectLink, Link as RouterLink} from "../../routing/Link";
import {useFoldForList, useFoldGenerate, useSplitSubCapacity} from "../hook/useMainRepUrlOr";
import {RepLink} from "../common/base";

//部件示意图：类似这；
export const PipeLineDiagram= ({ orc, rep, children,title='部件示意图'} : { orc: any,rep: any,children?: React.ReactNode, title?:string}
) => {
  const theme= useTheme();
  const sizeDg=orc?.部图表?.length || 0;
  const lsBlockMax=useSplitSubCapacity(sizeDg,8);        //以8张图为一个折叠区组合的。 实际图序号计算 =折叠区序号 * 8 +偏移量。
  const {sumArea, areaContent, btnBindUses}=useFoldForList(orc?.部图表, lsBlockMax,false);
  const callback = (dlPage: any, arak:number, pid:number) => {
    const aIdx= arak * lsBlockMax + pid;      //在总体列表中的顺序号。
    return <div key={aIdx} css={{"@media not print": {marginTop: '1rem', marginBottom: '1rem'},}}>
        <div css={{"@media print": {height: '100vh', overflowY: 'hidden',}}}>
          <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/LineDiagram#LineDiagram`}>
            <Text  variant="h2" css={{
              textAlign: 'center', marginTop: '1rem',
              "@media print": {
                pageBreakBefore: 'always', marginTop: 'unset',
              },
            }}>{orc?.部图表?.[aIdx]?.til??'管道'}&nbsp;{title}</Text>
          </DirectLink>
          <div css={{
            display: 'flex',
            justifyContent: 'space-between'
          }}>
            <Text>序号：{aIdx+1}</Text>
            <Text>报告编号：{rep.isp.no}</Text>
          </div>
          {/*这底下表格calc(100vh - 6rem)是扣除掉非表格外的高度，应该不会超过一张纸高度的，一张纸打印一个表格，让表格尾部尽量能接近纸张底部做法*/}
          <Table fixed={["62%", "%"]} css={{borderCollapse: 'collapse', "@media print": {minHeight: 'calc(100vh - 6rem)'}}} tight miniw={800}>
            <TableBody>
              <DirectLink
                  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/LineDiagram?dxtix=` + aIdx + `#LineDiagram`}>
                <TableRow>
                  <Cell colSpan={2} css={{
                    "@media print": {
                      height: '-webkit-fill-available',     //固定高度 77vh?
                      pageBreakInside: 'avoid'
                    }, padding: 0,
                  }}>
                    <div css={{display: 'flex', justifyContent: 'space-around', alignItems: 'center',
                      "@media print": {marginTop: '1px', marginRight: '1px', marginBottom: '1px',minHeight:'65vh'},
                    }}>
                      {orc?.部图表?.[aIdx]?._FILE_?.url &&
                          <img src={process.env.REACT_APP_OSS_ENDP + orc?.部图表?.[aIdx]?._FILE_?.url}
                               alt={orc?.部图表?.[aIdx]?._FILE_?.url}
                               css={{
                                 maxHeight: '14cm',   //在这个元素的上一级元素可以自己加一个固定高度值，就像一张纸打印的应该多高的取值。这个用固定高度会导致图片自动的横竖比例不均衡压缩=会变形啊！24cm是纸张大约最多高度=报告最大图片高。
                                 maxWidth: '-webkit-fill-available',
                                 [theme.mediaQueries.lg]: {maxHeight: '18cm', maxWidth: undefined},           //普通图片+大屏幕限制高度才是关键的。
                                 //【很容易超过限制！！】A4纸规格21cm×29.7cm，扣除页眉页脚再扣除 tr td以及高度方向上的其它DOM：标题高度，其它tr行高。
                                 //打印css：需要在<td>上加height: 86vh盛满整张纸张后，能保证图片正常打印。 打印时: 小图片不会主动放大的。
                                 "@media print": {maxHeight: '86vh', maxWidth: '100%'},        //对A4纸张竖版的高度26cm基本都是图片整张纸，这里没考虑多个图片在宽度方向上的并排布局：可用软件合并。
                               }}
                          />
                      }
                    </div>
                  </Cell>
                </TableRow>
                <TableRow>
                  <CCell>
                    <div css={{
                      height: '100%',
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignContent: 'space-between', alignItems: 'flex-start'
                    }}>
                      <div><Text>检验：</Text>&nbsp; {orc?.部图表?.[aIdx]?.sgm?.name}</div>
                      <div css={{textAlign: 'end'}}><Text>日期</Text>2022-12-31</div>
                    </div>
                  </CCell>
                  <CCell>
                    <div css={{
                      height: '100%',
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignContent: 'space-between',
                      alignItems: 'flex-start'
                    }}>
                      <div><Text>审核：</Text></div>
                      <div css={{textAlign: 'end'}}><Text>日期</Text>2021-01-31</div>
                    </div>
                  </CCell>
                </TableRow>
              </DirectLink>
            </TableBody>
          </Table>
        </div>
      </div>
  }

  const [renderAll]=useFoldGenerate({sumArea,btnBindUses,areaContent, callback,mark:'部件示意图折叠'});
  const dxtNext= (orc?.部图表?.length || 0);
  return <>
    {sizeDg <= 0 &&
        <RouterLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/LineDiagram#LineDiagram`}>
          <Text id='LineDiagram' variant="h2" css={{
            textAlign: 'center', marginTop: '1rem', "@media print": {display: 'none',},
          }}>部件示意图的上传</Text>
        </RouterLink>
    }
    <div id="PipeLineDiagram"/>
    {renderAll}
    <RouterLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/LineDiagram?dxtix=${dxtNext}#LineDiagram`}>
      <Text  variant="h3" css={{
        textAlign: 'center', "@media print": {display: 'none',},
      }}>新增加部件示意图，序号加1</Text>
    </RouterLink>
    <RepLink rep={rep} tag={'DiagramManager'}>
      <Text  variant="h3" css={{
        textAlign: 'center', "@media print": {display: 'none',},
      }}>部件示意图的管理对象的删除</Text>
    </RepLink>
  </>;
};
